<template>
    <a-table :dataSource="dataSource" :columns="columns">
        <template #action="{ record }">
            <span>
                <a>Invite 一 {{ record.name }}</a>
                <a-divider type="vertical" />
                <a @click="confirm">Delete</a>
                <a-divider type="vertical" />
                <a class="ant-dropdown-link">
                    More actions
                    <down-outlined />
                </a>
            </span>
        </template>
    </a-table>
</template>
<script>
import { Modal } from "ant-design-vue";
export default {
    setup() {
        const confirm = () => {
            Modal.confirm({
                title: "Confirm",
                icon: null,
                content: "Bla bla ...",
                okText: "确认",
                cancelText: "取消",
            });
        };
        return {
            dataSource: [
                {
                    key: "1",
                    name: "胡彦斌",
                    age: 32,
                    address: "西湖区湖底公园1号",
                },
                {
                    key: "2",
                    name: "胡彦祖",
                    age: 42,
                    address: "西湖区湖底公园1号",
                },
            ],

            columns: [
                {
                    title: "姓名",
                    dataIndex: "name",
                    key: "name",
                },
                {
                    title: "年龄",
                    dataIndex: "age",
                    key: "age",
                },
                {
                    title: "住址",
                    dataIndex: "address",
                    key: "address",
                },
                {
                    title: "Action",
                    key: "action",
                    slots: { customRender: "action" },
                },
            ],
            confirm,
        };
    },
};
</script>
